
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>限定输入内容</title>
    <style>
        a:link,a:visited{ color: #222;text-decoration: none;}
        a:hover{color: #fd4913;}
        body{width: 400px;margin: 0 auto;}
        p{line-height: 38px;font-size: 18px;} 
    </style>
</head>
<body>
    <form id="form">
        <p>年度:<input type="text" name="year"></p>
        月份:<input type="text" name="month">
        <p><input type="submit" value="查询"></p>
    </form>
    <div id="result"></div>
    <script>
        var form=document.getElementById('form');
        var result=document.getElementById('result');
        var inputs=document.getElementsByTagName('input');
        form.onsubmit=function(){
            return checkYear(inputs.year)&&checkMonth(inputs.month);
        }   
        function checkYear(obj){
            if(!obj.value.match(/^\d{4}$/)){
                obj.style.borderColor='red';
                result.innerHTML='输入有误，年份为4位数字表示';
                return false;
            }
            result.innerHTML='';
            return true;
        }
        function checkMonth(obj){
            if(!obj.value.match(/^((0?[1-9])|(1[012]))$/)){
                obj.style.borderColor='red';
                result.innerHTML='输入有误，月份为1-12之间';
                return false;
            }
            result.innerHTML='';
            return true;
        }
        inputs.year.onfocus=function(){
            this.style.borderColor='';
        };
        inputs.month.onfocus=function(){
            this.style.borderColor='';
        };
        // inputs.year.onblur=function(){
        //     this.value=this.value.trim();
        //     checkYear(this);
        // };
        // inputs.month.onblur=function(){
        //     this.value=this.value.trim();
        //     checkMonth(this);
        // };
    </script>
    <p><a href="9.html">返回上一页</a></p>
</body>
</html>